<template>
  <div class="prediction-summary">
    <div class="summary-content">
      <!-- 标题面板 -->
      <div class="summary-header">
        <h3 class="panel-title">
          <Icon type="ios-analytics" size="20" />
          预测历史记录
        </h3>
        <div class="refresh-controls">
          <Button 
            type="default" 
            @click="loadPredictionSummary"
            icon="md-refresh"
            :loading="loading"
            size="small"
          >
            刷新数据
          </Button>
        </div>
      </div>
      
      <!-- 预测信息面板 -->
      <div class="prediction-panel" v-if="hasPrediction">
        <!-- 基本信息 -->
        <div class="prediction-info">
          <div class="info-item">
            <span class="info-label">预测模型:</span>
            <span class="info-value">{{ predictionData.model }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">预测时间:</span>
            <span class="info-value">{{ predictionData.prediction_time }}</span>
          </div>
        </div>
        
        <!-- 总体统计 -->
        <div class="overall-stats">
          <h4 class="stats-title">
            <Icon type="ios-stats" size="18" />
            7天总体统计
          </h4>
          <div class="stats-grid">
            <div class="stat-card">
              <div class="stat-icon avg">
                <Icon type="ios-pulse" size="24" />
              </div>
              <div class="stat-content">
                <span class="stat-label">平均负荷</span>
                <span class="stat-value">{{ predictionData.overall_stats.avg_load }} MW</span>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon peak">
                <Icon type="ios-trending-up" size="24" />
              </div>
              <div class="stat-content">
                <span class="stat-label">峰值负荷</span>
                <span class="stat-value">{{ predictionData.overall_stats.peak_load }} MW</span>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon valley">
                <Icon type="ios-trending-down" size="24" />
              </div>
              <div class="stat-content">
                <span class="stat-label">谷值负荷</span>
                <span class="stat-value">{{ predictionData.overall_stats.valley_load }} MW</span>
              </div>
            </div>
            
            <div class="stat-card">
              <div class="stat-icon diff">
                <Icon type="ios-swap" size="24" />
              </div>
              <div class="stat-content">
                <span class="stat-label">峰谷差</span>
                <span class="stat-value">{{ predictionData.overall_stats.peak_valley_diff }} MW</span>
              </div>
            </div>
          </div>
        </div>
        
        <!-- 每日详情 -->
        <div class="daily-details" v-if="predictionData.daily_details && predictionData.daily_details.length > 0">
          <h4 class="details-title">
            <Icon type="ios-calendar" size="18" />
            每日详情
          </h4>
          
          <div class="details-table">
            <Table 
              :columns="tableColumns" 
              :data="predictionData.daily_details"
              size="small"
              border
              stripe
              :height="300"
              class="prediction-table"
            />
          </div>
        </div>
      </div>
      
      <!-- 无预测状态 -->
      <div v-else class="no-prediction">
        <Icon type="ios-alert" size="64" />
        <p class="no-prediction-text">{{ loading ? '正在加载...' : '暂未预测' }}</p>
        <p class="no-prediction-hint">请先进行7天负荷预测</p>
      </div>
    </div>
  </div>
</template>

<script>
import { predictionAPI } from '@/utils/api'

export default {
  name: 'PredictionSummary',
  data() {
    return {
      loading: false,
      hasPrediction: false,
      predictionData: null,
      
      // 表格列定义
      tableColumns: [
        {
          title: '日期',
          key: 'date',
          width: 120,
          align: 'center',
          render: (h, params) => {
            const date = new Date(params.row.date)
            const today = new Date()
            const isToday = date.toDateString() === today.toDateString()
            
            return h('span', {
              style: { 
                color: isToday ? '#4ecdc4' : '#ddd',
                fontWeight: isToday ? 'bold' : 'normal'
              }
            }, [
              h('div', params.row.date),
              isToday ? h('div', { 
                style: { fontSize: '12px', color: '#4ecdc4' } 
              }, '今天') : null
            ])
          }
        },
        {
          title: '平均负荷 (MW)',
          key: 'avg_load',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: { color: '#4ecdc4', fontWeight: 'bold' }
            }, params.row.avg_load?.toFixed(2) || 'N/A')
          }
        },
        {
          title: '峰值负荷 (MW)',
          key: 'peak_load',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: { color: '#ff6b6b', fontWeight: 'bold' }
            }, params.row.peak_load?.toFixed(2) || 'N/A')
          }
        },
        {
          title: '谷值负荷 (MW)',
          key: 'valley_load',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: { color: '#74b9ff', fontWeight: 'bold' }
            }, params.row.valley_load?.toFixed(2) || 'N/A')
          }
        },
        {
          title: '峰谷差 (MW)',
          key: 'peak_valley_diff',
          width: 120,
          align: 'center',
          render: (h, params) => {
            return h('span', {
              style: { color: '#a29bfe', fontWeight: 'bold' }
            }, params.row.peak_valley_diff?.toFixed(2) || 'N/A')
          }
        }
      ]
    }
  },
  
  mounted() {
    this.loadPredictionSummary()
  },
  
  methods: {
    async loadPredictionSummary() {
      this.loading = true
      
      try {
        // 调用新的预测摘要API
        const response = await predictionAPI.getPredictionSummary()
        
        console.log('🔍 预测摘要响应:', response)
        
        if (response.success && response.data) {
          if (response.data.has_prediction) {
            this.hasPrediction = true
            this.predictionData = response.data
            this.$Message.success('预测数据加载成功')
          } else {
            this.hasPrediction = false
            this.predictionData = null
          }
        } else {
          throw new Error(response.message || '获取预测数据失败')
        }
        
      } catch (error) {
        console.error('获取预测摘要失败:', error)
        this.$Message.error('获取预测数据失败: ' + error.message)
        this.hasPrediction = false
        this.predictionData = null
      } finally {
        this.loading = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.prediction-summary {
  width: 100%;
  height: 100%;
  position: relative;
  
  .summary-content {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    
    .summary-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 15px 20px;
      background: rgba(7, 19, 50, 0.9);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      backdrop-filter: blur(10px);
      
      .panel-title {
        color: #75deef;
        font-size: 16px;
        font-weight: bold;
        margin: 0;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      
      .refresh-controls {
        :deep(.ivu-btn) {
          &.ivu-btn-default {
            background: rgba(26, 60, 88, 0.6);
            border: 1px solid #1a3c58;
            color: #75deef;
            
            &:hover {
              border-color: #75deef;
            }
          }
        }
      }
    }
    
    .prediction-panel {
      background: rgba(7, 19, 50, 0.9);
      border: 1px solid #1a3c58;
      border-radius: 12px;
      padding: 20px;
      backdrop-filter: blur(10px);
      display: flex;
      flex-direction: column;
      gap: 20px;
      
      .prediction-info {
        display: flex;
        gap: 30px;
        padding: 15px 20px;
        background: rgba(26, 60, 88, 0.4);
        border-radius: 8px;
        border: 1px solid #1a3c58;
        
        .info-item {
          display: flex;
          align-items: center;
          gap: 10px;
          
          .info-label {
            color: #999;
            font-size: 14px;
          }
          
          .info-value {
            color: #4ecdc4;
            font-size: 14px;
            font-weight: bold;
          }
        }
      }
      
      .overall-stats {
        .stats-title {
          color: #75deef;
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        
        .stats-grid {
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
          gap: 15px;
          
          .stat-card {
            background: rgba(26, 60, 88, 0.4);
            border: 1px solid #1a3c58;
            border-radius: 8px;
            padding: 15px;
            display: flex;
            align-items: center;
            gap: 15px;
            transition: all 0.3s ease;
            
            &:hover {
              transform: translateY(-2px);
              box-shadow: 0 4px 12px rgba(117, 222, 239, 0.2);
              border-color: #75deef;
            }
            
            .stat-icon {
              width: 50px;
              height: 50px;
              border-radius: 50%;
              display: flex;
              align-items: center;
              justify-content: center;
              
              &.avg {
                background: linear-gradient(135deg, #4ecdc4, #00d4aa);
              }
              
              &.peak {
                background: linear-gradient(135deg, #ff6b6b, #ee5a52);
              }
              
              &.valley {
                background: linear-gradient(135deg, #74b9ff, #0984e3);
              }
              
              &.diff {
                background: linear-gradient(135deg, #a29bfe, #6c5ce7);
              }
              
              :deep(.ivu-icon) {
                color: white;
              }
            }
            
            .stat-content {
              display: flex;
              flex-direction: column;
              gap: 5px;
              
              .stat-label {
                color: #999;
                font-size: 14px;
              }
              
              .stat-value {
                color: #75deef;
                font-size: 18px;
                font-weight: bold;
              }
            }
          }
        }
      }
      
      .daily-details {
        .details-title {
          color: #75deef;
          font-size: 16px;
          font-weight: bold;
          margin-bottom: 15px;
          display: flex;
          align-items: center;
          gap: 8px;
        }
        
        .details-table {
          border-radius: 8px;
          overflow: hidden;
        }
      }
    }
    
    .no-prediction {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 60px 20px;
      background: rgba(7, 19, 50, 0.5);
      border: 1px dashed #1a3c58;
      border-radius: 12px;
      text-align: center;
      
      :deep(.ivu-icon) {
        color: #75deef;
        margin-bottom: 20px;
        opacity: 0.7;
      }
      
      .no-prediction-text {
        color: #ddd;
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: 500;
      }
      
      .no-prediction-hint {
        color: #999;
        font-size: 14px;
        margin: 0;
      }
    }
  }
}

// 表格样式
:deep(.prediction-table) {
  background: rgba(7, 19, 50, 0.8);
  border: 1px solid #1a3c58;
  border-radius: 8px;
  
  .ivu-table-header {
    background: rgba(26, 60, 88, 0.8);
    
    th {
      background: transparent !important;
      color: #75deef !important;
      font-weight: bold !important;
      border-bottom: 2px solid #1a3c58 !important;
    }
  }
  
  .ivu-table-body {
    tr {
      background: rgba(7, 19, 50, 0.5);
      
      &:hover {
        background: rgba(26, 60, 88, 0.6) !important;
      }
      
      &:nth-child(even) {
        background: rgba(26, 60, 88, 0.3);
      }
      
      td {
        color: #ddd !important;
        border-bottom: 1px solid #1a3c58 !important;
      }
    }
  }
}

// 响应式设计
@media (max-width: 768px) {
  .prediction-summary {
    .summary-content {
      padding: 15px;
      
      .summary-header {
        flex-direction: column;
        gap: 15px;
        text-align: center;
      }
      
      .prediction-panel {
        padding: 15px;
        
        .prediction-info {
          flex-direction: column;
          gap: 15px;
        }
        
        .overall-stats {
          .stats-grid {
            grid-template-columns: 1fr;
          }
        }
      }
    }
  }
}
</style>